<template>
  <!-- 整体布局页面，默认展示 -->
  <div class="layout-contrainer">
    <el-row type="flex" align="middle"> <!-- 顶部内容 -->
      <el-col :lg="4">
        <el-image :src="require('@/assets/logo.png')" class="logo" @click="showFirstIndex"/> <!-- logo标志 -->
      </el-col>
      <el-col :lg="12" :offset="3">
        <el-input placeholder="请输入需要搜索的内容" class="content-search">
          <el-button slot="append" class="icon-search">
            <i class="el-icon-search" id="el-icon-search"/> <!-- 搜索框 -->
          </el-button>
        </el-input>
      </el-col>
      <el-col :lg="5" :offset="3">
        <div class="right-content">
          <span class="index-shop">
            <i class="el-icon-shopping-cart-1" @click="showOrderCat"/> <!-- 购物车 -->
          </span>
          <span class="index-advice" @mouseleave="hideSelectList('adviseSelectListRef')">
            <i class="el-icon-bell" @click="showView('/advise')" @mouseover="showSelectList('adviseSelectListRef')"/> <!-- 通知 -->
            <div id="advise-select-list" ref="adviseSelectListRef"> <!-- 通知鼠标悬浮下拉菜单 -->
              <div id="unuse-div"/>
              <div id="advise-select" @click="showView('/commonAdvise')"><span>公告</span></div>
              <div id="advise-select" @click="showView('/commentAdvise')"><span>评论</span></div>
              <div id="advise-select" @click="showView('/followeeAdvise')"><span>关注</span></div>
              <div id="advise-select" @click="showView('/personalAdvise')"><span>私信</span></div>
              <div id="advise-select" @click="showView('/systemAdvise')"><span>系统通知</span></div>
              <div id="advise-select" @click="showView('/adviseSettings')"><span>消息设置</span></div>
            </div>
          </span>
          <span v-if="!isLogin" class="login-regist"> <!-- 未登录状态，显示登陆/注册 -->
              <router-link to="/regist">注册</router-link>
              <el-divider direction="vertical"/>
              <router-link to="/login">登录</router-link>
          </span>
          <span id="user-avatar" v-else @mouseover="showSelectList('userSelectListRef')" @mouseleave="hideSelectList('userSelectListRef')"> <!-- 已登录状态，显示头像 -->
            <span @click="showView('/user')"><el-avatar :size="42" src="http://online.sccnn.com/img2/5890/coff160524-03.png"/></span>
            <div id="user-select-list" ref="userSelectListRef"> <!-- 头像鼠标悬浮下拉菜单 -->
              <div id="unuse-div"/>
              <div id="user-select" @click="showView('/myFollowee')"><svg-icon icon-class="heart"/>&ensp;我的关注</div>
              <div id="user-select" @click="showView('/myCollection')"><svg-icon icon-class="collect"/>&ensp;我的收藏</div>
              <div id="user-select" @click="showView('/myInfo')"><svg-icon icon-class="user"/>&ensp;个人中心</div>
              <div id="user-select" @click="showView('/accountSettings')"><svg-icon icon-class="setting"/>&ensp;账号设置</div>
              <el-divider/>
              <div id="user-select" @click="showView('/myArticle')"><svg-icon icon-class="myArticle"/>&ensp;我的文章</div>
              <div id="user-select" @click="showView('/putOutArticle')"><svg-icon icon-class="managerArticle"/>&ensp;发布文章</div>
              <div id="user-select" @click="showView('/writeArticle')"><svg-icon icon-class="writeArticle"/>&ensp;创作文章</div>
              <el-divider/>
              <div id="user-select" @click="showView('/myWallet')"><svg-icon icon-class="wallet"/>&ensp;我的钱包</div>
              <div id="user-select" @click="showView('/myOrder')"><svg-icon icon-class="order"/>&ensp;我的订单</div>
              <el-divider/>
              <div id="user-select"><svg-icon icon-class="help"/>&ensp;帮助&ensp;&ensp;&ensp;&ensp;</div>
              <div id="user-select"><svg-icon icon-class="exit"/>&ensp;退出&ensp;&ensp;&ensp;&ensp;</div>
            </div>
          </span>
        </div>
      </el-col>
    </el-row>
    <el-row class="index-top-content"> <!-- 文章类别模块 -->
      <div  @mouseleave="hiddenHoverContent">
        <el-row>
          <el-col :lg="5">
            <el-row>
              <div class="article-category">
                <i class="el-icon-s-unfold"/>
                <span>文章分类</span>
              </div>
            </el-row>
            <el-row class="article-child-category" v-for="(layoutCategory,layoutIndex) in layoutCategories" :key="layoutIndex">
              <div class="article-child-category-content" @mouseover="showHoverContent(layoutCategory)" @click="showArticleList(layoutCategory)">
                <el-col :lg="20">
                  <span>{{layoutCategory}}</span>
                </el-col>
                <el-col :lg="2">
                  <i class="el-icon-arrow-right"/>
                </el-col>
              </div>
            </el-row>
          </el-col>
          <el-col :lg="19" id="hover-content" ref="hoverRef">
            <div @mouseleave="hiddenHoverContent">
              <el-row>
                <el-col :lg="8"  v-for="(article,col) in articleList" :key="col">
                  <el-row>
                    <el-image :src="article.pic_url" class="article-img"/>
                  </el-row>
                  <el-row>
                    <span class="articleTitle" @click="toArticleCon(article)">{{article.title}}</span>
                  </el-row>
                  <el-row>
                    <el-avatar :size="14" :src="article.pic_url" style="float:left"/>
                    <span class="article-person">{{article.person}}</span>
                    <span>
                      <span>&ensp;<i class="el-icon-view"/>浏览&ensp;{{article.viewnum}}</span>
                      <span>&ensp;<i class="el-icon-chat-dot-round"/>评论&ensp;{{article.commentnum}}</span>
                    </span>
                  </el-row>
                  <el-row>
                    <span>{{formatter(article.publish_time,"yyyy-MM-dd hh:mm:ss")}}</span>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :lg="14" ref="carouselRef">
            <el-carousel :interval="5000" arrow="always" height="350px">
              <el-carousel-item v-for="item in images" :key="item">
                <el-image :src="item" class="image"/>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :lg="5" ref="quickLoginRef"> <!-- 快速登录 -->
            <div class="quick-login">
              <span>快速登录</span>
              <el-form class="login-form" auto-complete="on" label-position="left" size="small">
                <el-form-item prop="username">
                  <el-input name="username" type="text" auto-complete="on" placeholder="请输入用户名" prefix-icon="el-icon-user"/>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input
                    type="password"
                    name="password"
                    auto-complete="on"
                    placeholder="请输入密码"
                    prefix-icon="el-icon-lock"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" class="login-button">
                    立即登录
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-col :lg="12">
                    <el-checkbox>记住密码</el-checkbox>
                  </el-col>
                  <el-col :lg="12" >
                    <router-link to="">忘记密码?</router-link>
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <el-divider><span class="other-login-content">其它登录</span></el-divider>
                  <el-row>
                    <el-col :lg="6">
                      <span @click="loginByThirdParty">
                        <svg-icon icon-class="QQ" class='layout-icon'/>
                      </span>
                    </el-col>
                    <el-col :lg="6">
                      <span @click="loginByThirdParty">
                        <svg-icon icon-class="weixin" class='layout-icon' />
                      </span>
                    </el-col>
                    <el-col :lg="6">
                      <span @click="loginByThirdParty">
                         <svg-icon icon-class="GitHub" class='layout-icon'/>
                      </span>
                    </el-col>
                    <el-col :lg="6">
                      <span @click="loginByThirdParty">
                         <svg-icon icon-class="weibo" class='layout-icon' @click="loginByThirdParty"/>
                      </span>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <el-row>
      <el-row>
        <div class="free-area">
          <strong><i class="el-icon-arrow-right"/>&ensp;&ensp;热门推荐</strong>
        </div>
      </el-row>
      <el-row>
        <el-menu mode="horizontal" :default-active="activeIndex" @select="handlerSelect"> <!-- 热门推荐菜单 -->
          <el-menu-item index="/all" ref="/all">全部</el-menu-item>
          <el-menu-item index="/hot" ref="/hot">热门文章</el-menu-item>
          <el-menu-item index="/html" ref="/html">HTML/CSS</el-menu-item>
          <el-menu-item index="/javaScript" ref="/javaScript">JavaScript</el-menu-item>
          <el-menu-item index="/php" ref="/php">PHP</el-menu-item>
          <el-menu-item index="/java" ref="/java">Java</el-menu-item>
          <el-menu-item index="/go" ref="/go">Go</el-menu-item>
          <el-menu-item index="/python" ref="/python">Python</el-menu-item>
        </el-menu>
      </el-row>
      <el-row>
        <router-view/>
      </el-row>
    </el-row>
    <el-row> <!-- 底部内容 -->
      <el-divider/>
      <el-row>
        <el-row>
          <el-col :span="4" :push="2">
            <b>网站相关</b>
          </el-col>
          <el-col :span="4" :push="2">
            <b>常用链接</b>
          </el-col>
          <el-col :span="4" :push="2">
            <b>联系我们</b>
          </el-col>
          <el-col :span="4" :push="2">
            <b>关注我们</b>
          </el-col>
          <el-col :span="4" :push="2">
            <b>内容许可</b>
          </el-col>
        </el-row>
        <el-row class="footer-item-content1">
          <el-col :span="4" :push="2">
            <div>关于我们</div>
            <div>服务条款</div>
            <div>帮助中心</div>
            <div>编辑器语法</div>
          </el-col>
          <el-col :span="4" :push="2">
            <div>百年智教育</div>
            <div>百年智论坛</div>
          </el-col>
          <el-col :span="4" :push="2">
            <div>联系我们</div>
            <div>加入我们</div>
            <div>建议反馈</div>
          </el-col>
          <el-col :span="4" :push="2">
            <div>微博</div>
            <div>twitter</div>
          </el-col>
          <el-col :span="4" :push="2">
            除特别说明外，用户内容均采用知识共享署名-非商业性使用-禁止演绎4.0 国际许可协议 (CC BY-NC-ND 4.0) 进行许可
            <p>
              本站由 百年智教育 提供更新服务
            </p>
          </el-col>
        </el-row>
      </el-row>
      <el-row class="footer-item-content2">
        Copyright © 2020 百年智集团 当前版本 0.0.1
      </el-row>
    </el-row>
  </div>
</template>
<script>
import { getArticleByType } from "@/api/article/Layout"
export default {
  name: 'Layout',
  data() {
    return {
      articleList:[],
      // 根据路由显示热门推荐当前菜单状态
      activeIndex: this.$route.path,
      // 存储之前热门推荐显示的菜单状态
      preFreeActiveIndex: this.$route.path,
      images: [

      ],
      layoutCategories: [
        'HTML/CSS',
        'JavaScript',
        'PHP',
        'Java',
        'Go',
        'Python'
      ],
      hoverContentTitle: '',
      isLogin: true
    }
  },
  created(){
    this.findCarouselList()
  },
  methods: {
    // 点击logo标志触发事件，默认路由至首页
    showFirstIndex() {
      this.$router.push({
        path: '/'
      })
    },
    // 点击下拉悬浮菜单触发事件
    showView(index) {
      this.$router.push({
        path: index
      })
    },
    // 第三方登录触发事件
    loginByThirdParty() {
      this.$message.info('当前版本暂不支持此功能');
    },
    // 鼠标悬浮触发下拉菜单显示
    showSelectList(refName) {
      this.$refs[refName].style.display = 'block';
    },
    // 鼠标离开触发下拉菜单隐藏
    hideSelectList(refName) {
      this.$refs[refName].style.display = 'none';
    },
    // 点击文章类别触发事件
    showArticleList(category) {
      this.$router.push({
        path: '/article',
        query: {
          category: category
        }
      });
    },
    // 鼠标悬浮文章类别模块时触发文章列表显示
    showHoverContent(category) {
      //TODO 获取数据
      this.hoverContentTitle = category;
      getArticleByType(category).then(response=>{
        this.articleList=response.data.data.records;
        this.$refs.hoverRef.$el.style.display = 'block';
        this.$refs.carouselRef.$el.style.display = 'none';
        this.$refs.quickLoginRef.$el.style.display = 'none';
      })

      
    },
    // 鼠标离开文章类别模块时触发文章列表隐藏
    hiddenHoverContent() {
      this.$refs.hoverRef.$el.style.display = 'none';
      this.$refs.carouselRef.$el.style.display = 'block';
      this.$refs.quickLoginRef.$el.style.display = 'block';
    },
    // 点击购物车触发事件
    showOrderCat() {
      this.$router.push({
        path: '/articleOrder'
      });
    },
    // 点击热门推荐菜单触发事件
    handlerSelect(key, keyPath) {
      // 路由跳转
      this.$router.push(key);
    },

    //获取轮播图片的方法
    findCarouselList(){
      console.log("获取了轮播图")
      this.$http.get("http://localhost:9999/demo3/demo3/findCarouselList").then(res=>{
        this.images=res.data
        console.log(this.images)
      })
      console.log("轮播图结束")
    },
    formatter (thistime, fmt) {
      let $this = new Date(thistime)
      let o = {
        'M+': $this.getMonth() + 1,
        'd+': $this.getDate(),
        'h+': $this.getHours(),
        'm+': $this.getMinutes(),
        's+': $this.getSeconds(),
        'q+': Math.floor(($this.getMonth() + 3) / 3),
        'S': $this.getMilliseconds()
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, ($this.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    },
    //跳转到文章详细页面
    toArticleCon(article){
      this.$router.push({
        path: '/articleContent',
        query:article
      });
    }

  },
  watch: {
    // 监听热门推荐菜单触发事件导致的路由地址变化，路由地址变化，则当前菜单样式也变化
    $route(to, from) {
      this.activeIndex = to.path;
      this.preFreeActiveIndex = from.path;
      this.$refs[this.preFreeActiveIndex].$el.style.background = "";
      this.$refs[this.preFreeActiveIndex].$el.style.color = "#909399";
      this.$refs[this.activeIndex].$el.style.background="rgb(14, 44, 99)";
      this.$refs[this.activeIndex].$el.style.color="white";
    }
  }
}
</script>
<style>
  .layout-icon {
    font-size: 30px;
    cursor: pointer;
  }
  #unuse-div {
    background: white;
    height: 12px;
  }
  #user-select {
    cursor: pointer;
    background: white;
    height: 42px;
    line-height: 42px;
    text-align: center;
    vertical-align: middle;
  }
  #user-select:hover {
    background: gainsboro;
  }
  #advise-select {
    cursor: pointer;
    background: white;
    height: 42px;
    line-height: 42px;
    text-align: left;
  }
  #advise-select:hover {
    background: gainsboro;
  }
  #advise-select > span {
    margin-left: 20%;
  }
  #user-select-list .el-divider {
    margin: 12px auto;
  }
  #user-select-list {
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.089);
    border-top: none;
    width: 150px;
    position: absolute;
    right: 52px;
    background: white;
    z-index: 100;
    display: none;
  }
  #advise-select-list {
    border: 1px solid rgba(0, 0, 0, 0.089);
    border-top: none;
    width: 126px;
    position: absolute;
    right: 52px;
    background: white;
    z-index: 100;
    display: none;
  }
  #user-avatar {
    margin-left: 16px;
  }
  .right-content {
    height: 42px;
  }
  .right-content .login-regist {
    display: -moz-inline-box; 
    display: inline-block;
    text-align: center; 
    width: 100px;
  }
  .right-content > span {
    vertical-align: middle;
    display: -moz-inline-box; 
    display: inline-block;
    text-align: center; 
    width: 42px;
  }
  .right-content .el-avatar {
    cursor: pointer;
  }
  #hover-content {
    display: none;
  }
  #hover-content .el-row .el-col .el-row:not(:nth-of-type(1)) {
    margin: 2% auto;
  }
  #hover-content .el-avatar ~ span:last-of-type {
    float: right;
  }
  #hover-content .el-row .el-col  {
    font-size: 14px;
    color: #909399;
  }
  #hover-content .el-col .el-row:nth-of-type(2) span {
    cursor: pointer;
    font-size: 24px;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
  }
  #hover-content > div > .el-row > .el-col {
    margin-top: 16px;
  }
  #hover-content {
    position: relative;
    top: 12px;
    z-index: 100;
    background: white;
    border: 1px solid gainsboro;
  }
  .article-child-category {
    cursor: pointer;
  }
  .charge-area {
    margin-top: 1%;
  }
  .free-area {
    margin-bottom: 1%;
  }
  .el-menu--horizontal>.el-menu-item {
    height: 35px;
    line-height: 35px;
  }
  .el-menu--horizontal>.el-menu-item.is-active {
    background: rgb(14, 44, 99);
    color: white;
  }
  .el-menu--horizontal>.el-menu-item.is-active, .el-menu--horizontal>.el-menu-item{
    border-bottom: none;
  }
  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }
  .el-image {
    cursor: pointer;
  }
  .footer-item-content1 {
    margin-top: 1%; 
    font-size: 14px;
  }
  .footer-item-content2 {
    font-size: 14px; 
    color: gray; 
    text-align: center;
  }
  b {
    font-size: 16px;
  }
  .login-button {
    width: 100%;
  }
  .login-form {
    width: 90%;
    margin: 10% auto;
  }
  .quick-login {
    text-align: center;
    font-size: 18px;
    margin-top: 6%;
    -webkit-box-shadow:0px 3px 3px #c8c8c8 ;
    -moz-box-shadow:0px 3px 3px #c8c8c8 ;
    box-shadow:0px 3px 3px #c8c8c8 ;
  }
  .el-carousel {
    top: 12px;
  }
  .image {
    width: 100%;
    height: 100%;
  }
  #el-icon-search {
    color: white;
  }
  .article-child-category-content > .el-col:nth-of-type(1) span {
    margin-left: 10%;
  }
  .article-child-category-content {
    background: white;
    height: 48px;
    line-height: 48px;
  }
  .article-child-category-content:hover {
    background: gainsboro;
  }
  .article-child-category {
    border: 1px solid gainsboro;
  }
  .el-icon-s-unfold {
    color: white;
    margin-left: 10%;
  }
  .article-category {
    background-color: rgb(14, 44, 99);
    color: white;
    font-size: 24px;
    line-height: 48px;
    margin-top: 5%;
  }
  .icon-search i {
    color: rgb(14, 44, 99);
  }
  .layout-contrainer .el-row {
    margin: auto;
    width: 94%;
  }
  .index-advice, .index-shop, .login-regist {
    display: -moz-inline-box; 
    display: inline-block;
    height: 42px;
    line-height: 42px;
  }
  .index-advice i, .index-shop i {
      cursor: pointer;
      font-size: 24px;
  }
  .content-search .el-input-group__append {
    border-color: rgb(14, 44, 99);
  }
  .content-search .el-input-group__append {
    background-color: rgb(14, 44, 99);
    color: white;
  }
  a {
    text-decoration: none;
    color: black;
  }
  .article-img{
    width:256px;
    height:256px;
  }
  .articleTitle{
    width:256px;
    display: block;
  }
  .article-person{
    display:block;
    width:90px;
    float: left;
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
